﻿@model List<FrogFoot.Entities.ISPProduct>
@{
    ViewBag.Title = "Products";
}

<style type="text/css">
    .activeBox {
        padding: 3px;
        padding-left: 35%;
        text-align: center;
    }

</style>

@if (Model.Any() && Model.FirstOrDefault().ISP != null)
{
    <h2>Products: @Model.FirstOrDefault().ISP.Name</h2>
}
else
{
    <h2>Products</h2>
}

<table id="productsTable" class="table table-striped table-responsive">
    <thead>
        <tr>
            <td></td>
            <td>Product name</td>
            <td>Down speed</td>
            <td>Up speed</td>
            <td>Cap</td>
            <td>Setup 24M/M2M</td>
            <td>Cost/pm</td>
            <td>Description</td>
            <td>Active <span class="glyphicon glyphicon-info-sign" style="color: green" data-toggle="tooltip" title="Show or hide your product from the public for viewing and ordering"></span></td>
        </tr>
    </thead>
    <tbody>
        @{
            if (Model.Any())
            {
                foreach (var prod in Model)
                {
                    <tr>
                        <td>
                            @if (prod.ISPLogo != null)
                            {
                                <img src="~/Assets/ISPProductLogo/@prod.ISPLogo.AssetPath" width="200" height="60" alt="product image" />
                            }
                        </td>
                        <td>@prod.ProductName</td>
                        <td>@prod.LineSpeed</td>
                        <td>@prod.UpSpeed</td>
                        <td>@prod.Cap</td>
                        <td>@prod.SetupCost/@prod.M2MSetupCost</td>
                        <td>@prod.MonthlyCost</td>
                        <td>@prod.Description</td>
                        <td>
                            <div class="activeBox">
                                <input class="checkbox" data-prodid="@prod.ISPProductId" type="checkbox" @(prod.IsActive ? "checked='checked'" : "") disabled="disabled" />
                            </div>
                        </td>

                    </tr>
                }
            }
        }
    </tbody>
</table>

@section scripts {
    <script type="text/javascript">
        $(function () {
            $('#productsTable').DataTable({
                "ordering": true
            });
        })
    </script>
}